<template>
	<view class="content">
		<view class="order-item">
			<view class="i-top b-b">
				<text class="time">订单号:{{orderinfo.orderno}}</text>
 
			</view>

			<view class="goods-box-single">
				<image class="goods-img" :src="orderinfo.productinfo.product_image" mode="aspectFill"></image>
				<view class="right">
					<text class="title clamp">{{orderinfo.productinfo.product_title}}</text>
					<text class="attr-box">{{orderinfo.productinfo.specvalue_text}} </text>
					<text class="price">{{orderinfo.productinfo.total_productprice}}</text>
				</view>
			</view>
		</view>
		<view class="fsect">
			<view class="title">
				申请类型
			</view>
			<radio-group @change="setapplytype">
				<view class="itemlist">
					<label class="item">
						<radio value="1"></radio>只退款
					</label>
					<label>
						<radio value="2"></radio>退款退货
					</label>
				</view>
			</radio-group>
		</view>
		<view class="fsect">
			<view class="title">
				原因
			</view>
			<view class="itemlist">
				<uni-easyinput type="textarea" autoHeight v-model="reason" placeholder="请输入原因"></uni-easyinput>
			</view>
		</view>

		<view class="fsect">
			<view class="title">
				<text>上传图片</text>
			</view>
			<view class="imglist">
				<view v-for="(item,index) in remark_images"  class="imgitem">
					<image class="simage" :src="item" mode="aspectFill"></image>
					<image class="closeicon" @click="delpic(index)" src="@/static/close.png"></image>
				</view>


				<view class="imgitem">
					<image class="simage" @click="uploadpic" mode="aspectFill" src="@/static/upload.png"></image>
				</view>
 
			</view>
			
			<view class="operdiv"> 
			<text class="sbtn"  @click="addapply">提交申请</text>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderinfo: {
					"productinfo": {}
				},
				remark_images: [
			 
				],

				applytype: 0,//申请类型
				reason: "",
				order_table:"",
				order_id: 0,
			}
		},
		onLoad(option) {
			 this.order_id = option.order_id || 0;
			 this.order_table = option.order_table;
			this.getinfo();
		},
		methods: {
			addapply(){
				if(!this.applytype || !this.reason){
					uni.showToast({
						title:"请填写原因"
					});
					return ;
				}
				let that = this;
				let param={
					order_table:this.order_table,
					order_id:this.order_id,
					reason:this.reason,
					remark_images:this.remark_images.join(","),
					type:this.applytype
				};
				this.$util.req("/orderservice/add",param,true,function(res){
					//提交成功跳转订单详情页
					that.$util.toast("提交成功，请等待",function(){
						let gourl="/pages/order/orderinfo?orderid="+that.order_id;
						if(that.order_table=="jyshop_pinorder_product"){
							gourl="/pages/order/orderinfopin?orderid="+that.order_id;
						}
						uni.navigateTo({
							url:gourl
						})
					});
				});
			},
			
			delpic(index) {
				this.remark_images.splice(index, 1);
			},
			uploadpic() {
				let that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						let upurl = this.$util.baseurl + "/upload/uploadpic";
						uni.uploadFile({
							url: upurl,
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								'token': this.$util.getToken()
							},
							success: (uploadFileRes) => {
								let result = JSON.parse(uploadFileRes.data);
								if (result.code != 1) {
									uni.showToast({
										title: result.msg
									});
									return;
								}
								that.remark_images.push(result.data.fullurl);
							},
							fail: (e) => {
								console.log(e);
							}
						});

					}
				});
			},
			setapplytype(evt) {
				this.applytype = evt.target.value;
				console.log(this.applytype);
			},
			getinfo() {
				let param = {
					order_table: this.order_table,
					order_id:this.order_id
				}
				let that = this;
				this.$util.req("/orderservice/getOrderInfo", param, true, function(res) {
 
					that.orderinfo = res.data;
				});
			}
		 
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		background: $page-color-base;
		height: 100%;
	}
.operdiv{
	background-color: #FFFFFF;
	margin-top: 20upx;
	display: flex;
	justify-content: center;
	align-items: center;
	.sbtn{
		background-color: #FF5A5F;
		color: #FFFFFF;
		padding: 10upx 40upx;
		border-radius: 10upx;
	}
}
	.imglist {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.imgitem {
 
			position: relative;
			 
		}

		.simage {
			width: 200upx;
			height: 200upx;
			padding: 20upx;

		}

		.closeicon {
			position: absolute;
			top: 0upx;
			right: 0upx;
			width: 34upx;
			height: 34upx;
		}
	}

	.fsect {
		background-color: #FFFFFF;
		color: #333;
		margin-top: 20upx;
		padding-left: 20upx;
		padding-bottom: 20upx;

		.title {
			display: flex;
			padding: 20upx 0;
			justify-content: space-between;
			padding-right: 20upx;
		}

		.itemlist {
			display: flex;
			flex-direction: column;

			.item {
				padding: 20upx 0;
			}



		}
	}

	.order-item {
		display: flex;
		flex-direction: column;
		padding-left: 30upx;
		background: #fff;
		margin-top: 16upx;

		.i-top {
			display: flex;
			align-items: center;
			height: 80upx;
			padding-right: 30upx;
			font-size: $font-base;
			color: $font-color-dark;
			position: relative;

			.time {
				flex: 1;
			}

			.state {
				color: $base-color;
			}

			.del-btn {
				padding: 10upx 0 10upx 36upx;
				font-size: $font-lg;
				color: $font-color-light;
				position: relative;

				&:after {
					content: '';
					width: 0;
					height: 30upx;
					border-left: 1px solid $border-color-dark;
					position: absolute;
					left: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		/* 多条商品 */
		.goods-box {
			height: 160upx;
			padding: 20upx 0;
			white-space: nowrap;

			.goods-item {
				width: 120upx;
				height: 120upx;
				display: inline-block;
				margin-right: 24upx;
			}

			.goods-img {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		/* 单条商品 */
		.goods-box-single {
			display: flex;
			padding: 20upx 0;

			.goods-img {
				display: block;
				width: 120upx;
				height: 120upx;
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30upx 0 24upx;
				overflow: hidden;

				.title {
					font-size: $font-base + 2upx;
					color: $font-color-dark;
					line-height: 1;
				}

				.attr-box {
					font-size: $font-sm + 2upx;
					color: $font-color-light;
					padding: 10upx 12upx;
				}

				.price {
					font-size: $font-base + 2upx;
					color: $font-color-dark;

					&:before {
						content: '￥';
						font-size: $font-sm;
						margin: 0 2upx 0 8upx;
					}
				}
			}
		}

		.price-box {
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20upx 30upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.num {
				margin: 0 8upx;
				color: $font-color-dark;
			}

			.price {
				font-size: $font-lg;
				color: $font-color-dark;

				&:before {
					content: '￥';
					font-size: $font-sm;
					margin: 0 2upx 0 8upx;
				}
			}
		}

		.action-box {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100upx;
			position: relative;
			padding-right: 30upx;
		}

		.action-btn {
			width: 160upx;
			height: 60upx;
			margin: 0;
			margin-left: 24upx;
			padding: 0;
			text-align: center;
			line-height: 60upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;

			&:after {
				border-radius: 100px;
			}

			&.recom {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>
